<template>
    <div class="quality-task-table-container">
      <!-- 搜索和重置 -->
      <div class="search-header">
        <el-input
          v-model="searchQuery"
          placeholder="请输入内容"
          class="search-input"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
  
      <el-table
        :data="tableData"
        style="width: 100%"
        class="dark-table"
        :header-cell-style="{
          backgroundColor: 'rgb(15, 53, 115)',
          color: '#91caf6'
        }"
        :cell-style="{
          backgroundColor: 'rgb(10, 43, 94)',
          color: '#91caf6'
        }"
        :row-style="{ height: '25px' }"
      >
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="80"
      >
      </el-table-column>
      <el-table-column v-for="(col, index) in props.columns" :key="col.prop || index" :label="col.label" :prop="col.prop" />
      </el-table>
  
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="props.currentPage"
          v-model:page-size="props.pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :total="props.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
        <!-- background
          class="dark-pagination" -->
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, watch } from "vue";
  import { Search } from "@element-plus/icons-vue";
  const props = defineProps({
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => [{
        prop: 'name',
        label: '名称'
      }, {
        prop: "district",
        label: "所属区县"
      }, {
        prop: "deviceName",
        label: "设备名称"
      }, {
        prop: "deviceCategory",
        label: "设备类别"
      }, {
        prop: "deviceStatus",
        label: "设备状态"
      }]
    },
    tableData: {
      type: Array,
      default: () => []
    }
  });
  const searchQuery = ref("");
  
  const emits = defineEmits(["pageSizeChange", "currentChange", "queryTableData"]);
  
  const handleSearch = () => {
    emits('queryTableData', searchQuery.value)
  };
  
  const handleReset = () => {
    searchQuery.value = "";
    emits('queryTableData', searchQuery.value)
  };
  
  const handleSizeChange = (val) => {
    emits('pageSizeChange', val)
  };
  
  const handleCurrentChange = (val) => {
    console.log('currentChange', val)
    emits('currentChange', val)
  };
  </script>
  
  <style lang="scss" scoped>
  .quality-task-table-container {
    background-color: rgb(15, 53, 115);
    color: #91caf6;
    overflow-y: auto;
    height: 100%;
    padding: 10px;
  }
  
  .search-header {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0);
  }
  
  .search-input {
    width: 200px;
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  :deep(.dark-table) {
    height: 80%;
    background:rgb(10, 43, 94) ;
    --el-table-border-color: rgb(10, 43, 94);
    --el-table-border: 1px solid var(--el-table-border-color);
    --el-table-text-color: #91caf6;
    --el-table-header-text-color: #91caf6;
    --el-table-row-hover-bg-color: rgb(14, 51, 112);
  }
  
  :deep(.dark-pagination) {
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: #91caf6;
    --el-pagination-border-color: rgb(10, 43, 94);
    --el-pagination-hover-color: #409eff;
    --el-pagination-button-bg-color: transparent;
  }
  
  /* :deep(.el-button) {
    --el-button-bg-color: transparent;
    --el-button-border-color: #91caf6;
    --el-button-hover-bg-color: rgba(145, 202, 246, 0.1);
    --el-button-hover-border-color: #91caf6;
    --el-button-active-bg-color: rgba(145, 202, 246, 0.2);
    --el-button-text-color: #91caf6;
  } */
  
  /* :deep(.el-button--primary) {
    --el-button-bg-color: rgba(64, 158, 255, 0.1);
    --el-button-border-color: #409eff;
    --el-button-hover-bg-color: rgba(64, 158, 255, 0.2);
    --el-button-hover-border-color: #409eff;
    --el-button-active-bg-color: rgba(64, 158, 255, 0.3);
    --el-button-text-color: #409eff;
  } */
  
  /* :deep(.el-input) {
    --el-input-bg-color: transparent;
    --el-input-border-color: #91caf6;
    --el-input-text-color: #91caf6;
    --el-input-placeholder-color: rgba(145, 202, 246, 0.5);
  } */
  </style>
  